<template>
	<!-- 商品推荐 -->
	<div class="goods-block">
		<u-cell icon="gift" :title="title"></u-cell>

		<view style="display:flex;flex-direction:row;flex-wrap: wrap;">
			<view style="width:calc(100%/3);" v-for="(item, i) in productItems" :key="i" @click="onDetail(item.product_id)">
				<view class="goods-item">
					<!-- 图片 -->
					<image :src="$fullUrl(item.pic)" style="width: 100%; height:100px;" mode="aspectFit" />
					<!-- 商品名 -->
					<div class="u-line-1">{{ item.title }}</div>
					<!-- 单价 -->
					<div class="price">￥{{ item.price.toFixed(2) }}</div>
				</view>
			</view>
		</view>
	</div>
</template>

<script>
export default {
	name: 'homeProduct',
	props: {
		productItems: Array,
		title: String
	},
	methods: {
		onDetail(productId) {
			uni.navigateTo({
				url: `/pages/product/ProductDetail?productId=${productId}`
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.goods-block {
	background-color: $u-info-light;
}
.u-cell {
	font-size: 16px;
	background-color: $u-info-disabled; //#e0e2e5;
}

.goods-item {
	display: flex;
	flex-direction: column;
	background-color: white;
	margin: 5px;
	padding: 5px;
	border-radius: 10px;
	font-size: 12px;
}

.price {
	font-size: 14px;
	font-weight: bold;
	color: red;
	text-align: right;
}
</style>
